<template>
    <div class="login">
        <div class="content">
            <h2 class="topName">后台管理系统</h2>
            <!-- form表单 -->
            <!-- 用一个，自己封装一个 -->

            <!-- 
            ref= dom
            :model="ruleForm" 表格的数据
            status-icon   图标
            :rules="rules" 验证规则
             -->
          <el-form 
            ref="ruleFormRef" :model="ruleForm" 
            status-icon :rules="rules" class="demo-ruleForm">
                <el-form-item  prop="username">
                    <!-- <i class="iconfont icon-yonghu"></i> -->
                    <el-input :prefix-icon="User" v-model="ruleForm.username" type="text" autocomplete="off"/>
                </el-form-item>
                
                <el-form-item  prop="pwd">
                    <Winput @getPassw="getPassw"></Winput>
                </el-form-item>

                <el-form-item>
                    <WverifyI @getPassw="getPassv"></WverifyI>
                </el-form-item>
                
                <el-form-item>                
                    <el-button type="primary" @click="submitForm()" class="btn">登录</el-button>
                    <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script setup lang="ts">
// 引入图标
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref,getCurrentInstance} from 'vue'  // vue 的响应式数据
import type {  FormInstance } from 'element-plus'  // ts的数据类型校验
import { ElMessage } from 'element-plus'

import Winput from '@/W-element/W-input/index.vue'
import WverifyI from '@/W-element/W-verifyinp/index.vue'
import { getLogin } from '@/http/api/login'
import { useRouter } from 'vue-router'

let router = useRouter()
const instance:any = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

// 在ts中， =》 ref('') 是一个方法，可以得到它的数据
// 而 ref<FormInstance>() 是一个 泛型，(只有这个方法使用了之后，才能得到其数据类型)
const ruleFormRef = ref<FormInstance>()
// dom 操作，获取到form表单的 真实dom 结构


// 年龄校验
// 校验的规则： 任意规则，任意值
const checkPwd = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('Please input the pwd'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('Please input digits'))
        } else {
            if (value < 18) {
                callback(new Error('Pwd must be greater than 18'))
            } else {
                callback()
            }
        }
    }, 1000)
}
// 用户校验
const validateUsername = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input 用户名'))
    }
}

// 接口
interface formObj{
    username:string,
    pwd:string|number,
}

// ruleForm 表单数据
const ruleForm = reactive<formObj>({
    username: '',
    pwd: '',
})

// 校验规则
const rules = reactive({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    pwd: [{ validator: checkPwd, trigger: 'blur' }],
})

const getPassw = (val:string|number)=>{
    // console.log('密码',val);  // 获取到子组件给的数据
    ruleForm.pwd = val;    
}

let verifyP = ref(false)
const getPassv = (val:any)=>{
    verifyP.value = val
}

// const submitForm = (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     formEl.validate((valid) => {
//         if (valid) {
//             console.log('submit!')
//         } else {
//             console.log('error submit!')
//             return false
//         }
//     })
// }

// 点击提交触发 => 登录
const submitForm = ()=>{
    console.log(ruleForm);
    // 判断一下
    if(ruleForm.username&&ruleForm.pwd&&verifyP.value){
        // 发送网络请求
        console.log('发送网络请求');
        getLogin({username:ruleForm.username,password:ruleForm.pwd}).then(res=>{
            // 成功跳转到内部页面
            console.log('res',res.data.code);
            if(res.data.code == 200){
                // 保存token
                sessionStorage.setItem('token',res.data.token);
                sessionStorage.setItem('limit',res.data.limit);  //用户的权限
                // 跳转到登录后的页面
                router.replace('/layout')
            }else{
                ElMessage.error('用户名或密码错误')
            }            
        })
    }else{
        // console.log('请输入用户名或验证码');  
        // console.log(22222);              
        ElMessage.error('请输入用户名或验证码')
        }      
    }
// 重置
const resetForm = (formEl: FormInstance | undefined ) => {
    if (!formEl) return;
    formEl.resetFields()
}
</script>

<style scoped lang="scss">
el-input{
    width: 280px;
    // margin-left: 100px;
    margin-left: 0;
}
.login {
    width: 400px;
    height: 100%;
    margin: 0 auto;
    margin-top: 100px;
    .content {
        margin: 0 auto;
        padding: 10px;
        border: 2px solid orange;
        border-radius: 10px;
        .topName {
            border-bottom: 2px solid #ccc;
            text-align: center;
            padding-bottom: 4px;
            // background-color: pink;
        }
        input{
            text-align: center;
        }
        .btn{
            color: #fff;
            width: 100%;
        }
        .btn:hover{
            color: #333;
            background: pink;
        }
    }
}
</style>